<!-- 主页面右下部分 -->
<template>
  <div class="contentlist">
    <div class="top">
      <div class="left">
        <div>
          <button class="batchDelete" @click="showCheckbox = true" v-if="!showCheckbox">批量删除</button>
        </div>

        <div v-if="showCheckbox" class="deleteAllFunction">
          <button @click="showCheckbox = false" class="cancelDeletion">取消删除</button>
          <button class="selectAll">
            <a-checkbox v-model:checked="checkAll" @change="onCheckAllChange">全选</a-checkbox>
          </button>
          <div class="delete" @click="handledelete" v-if="showCheckbox">
            <dd>
              <i class="appIcon-iconfont appIcon-shanchu"></i>
            </dd>删除
          </div>
        </div>
      </div>

      <div>共{{ dataList.length }}个项目</div>
      <div class="right">
        <div class="searchclass" v-if="sousuo" @click="sousuo = false">
          <i class="appIcon-iconfont appIcon-sousuo"></i>
        </div>
        <!-- <input type="text" name id /> -->
        <a-input-search v-else v-model:value="searchValue" placeholder="搜索项目名称" style="width: 200px;"
          @search="onSearch" />

        <div class="type" @click="changetype(1)" v-if="type == 1">
          <i class="appIcon-iconfont appIcon-tubiaozhanshi"></i>
        </div>
        <div class="type" @click="changetype(2)" v-else>
          <i class="appIcon-iconfont appIcon-liebiaozhanshi"></i>
        </div>
      </div>
    </div>

    <!-- 主页面列表展示列表 -->
    <div class="list2" v-show="type == 2">
      <ul>
        <a-checkbox-group v-model:value="checkboxValue" style="width: 100%;">
          <li v-for="(item, index) in dataList" :key="index" @click.self="toDetail(item.hhxsChartId, '0')">
            <div class="box">
              <a-checkbox :value="item.hhxsChartId" class="checkbox groupbox" v-show="showCheckbox"></a-checkbox>
              <img :src="item.imageUrl" v-if="item.imageUrl" @click.stop="toDetail(item.hhxsChartId, '1')" />
              <img src="https://picsum.photos/id/11/10/6" v-else @click.stop="toDetail(item.hhxsChartId, '1')" />
              <!-- <p @click="toDetail(item.hhxsChartId,'0')">{{item.title}}</p> -->
              <dl>
                <a-input @change="titleChange($event)" @blur="editTitle(item)" v-model:value="item.title" />
              </dl>
            </div>

            <div class="edit">
              <a-popover overlayClassName="popverclass" trigger="hover">
                <dd>
                  <i class="appIcon-iconfont appIcon-more"></i>
                </dd>
                <template #content>
                  <div class="tips">
                    <a-popover placement="leftTop" trigger="click" overlayClassName="shareLinks">
                      <template #content>
                        <h2>分享链接</h2>
                        <div class="flex">
                          <a-input v-model:value="fareurl" size="large" width="220px" />
                          <dd class="linkCopy" @click="copyUrl">
                            <i class="appIcon-iconfont appIcon-fuzhi"></i>
                          </dd>
                          <!-- <a-button @click="copyUrl" size="large" type="primary">{{ copyState }}</a-button> -->
                        </div>
                      </template>
          <li @click="fare(item)">分享链接</li>
          </a-popover>
          <!-- <li>创建副本</li> -->

          <!-- <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                      <template #content>
                        <div class="downloadFlex">
                          <li>下载(PPT)</li>
                          <li>移动弄</li>
                          <li>下载(PDF)</li>
                        </div>
                      </template>
                      <li>移动到</li>
                    </a-popover>

                    <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                      <template #content>
                        <div class="downloadFlex">
                          <li>下载(PPT)</li>
                          <li>下载(JPG)</li>
                          <li>下载(PDF)</li>
                        </div>
                      </template>
                      <li>下载为</li>
                    </a-popover>

                    <li>重命名</li> -->
          <li @click="deleteitem(item)">删除文件</li>
    </div>
</template>
</a-popover>
</div>
</li>
</a-checkbox-group>
</ul>
</div>
<!-- 主页面图形展示列表 -->
<div class="list" v-show="type == 1">
  <ul>
    <a-checkbox-group v-model:value="checkboxValue" style="width: 100%;">
      <li v-for="(item, index) in dataList" :key="index"
        :class="`animate__animated animate__fadeInUp animate__delay-0${index % 5}s`" :style="`height:${height}px`">
        <div class="box conentbox" :style="`background:${item.params.bgColor}`">
          <img :src="item.imageUrl" v-if="item.imageUrl" />
          <a-checkbox :value="item.hhxsChartId" class="checkbox groupbox" v-show="showCheckbox"></a-checkbox>

          <div class="edit">
            <a-popover trigger="hover" overlayClassName="popverclass">
              <dd>
                <i class="appIcon-iconfont appIcon-more"></i>
              </dd>
              <template #content>
                <div class="tips">
                  <a-popover placement="leftTop" trigger="click" overlayClassName="shareLinks">
                    <template #content>
                      <h2>分享链接</h2>
                      <div class="flex">
                        <a-input v-model:value="fareurl" size="large" width="220px" />
                        <dd class="linkCopy" @click="copyUrl">
                          <i class="appIcon-iconfont appIcon-fuzhi"></i>
                        </dd>
                        <!-- <a-button @click="copyUrl" size="large" type="primary">{{ copyState }}</a-button> -->
                      </div>
                    </template>
      <li @click="fare(item)">分享链接</li>
      </a-popover>
      <!-- <li>创建副本</li>
                      <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                        <template #content>
                          <div class="downloadFlex">
                            <li>下载(PPT)</li>
                            <li>下载(JPG)</li>
                            <li>下载(PDF)</li>
                          </div>
                        </template>
                        <li>移动到</li>
                      </a-popover>
                      <a-popover placement="leftTop" trigger="click" overlayClassName="downloadAs">
                        <template #content>
                          <div class="downloadFlex">
                            <li>下载(PPT)</li>
                            <li>下载(JPG)</li>
                            <li>下载(PDF)</li>
                          </div>
                        </template>
                        <li>下载为</li>
                      </a-popover>
                      <li>重命名</li> -->
      <li @click="deleteitem(item)">删除文件</li>
</div>
</template>
</a-popover>
</div>

<div class="mask" @click="toDetail(item.hhxsChartId, '1')"></div>
</div>
<dl>
  <a-input @change="titleChange($event)" @blur="editTitle(item)" v-model:value="item.title" />
</dl>
</li>
</a-checkbox-group>
</ul>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, watch, onMounted, nextTick } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import request from "@/utils/request"
import { copyText, readClipboard } from '@/utils/clipboard'
import { message } from 'ant-design-vue'
import { getBoxWidth } from '@/hooks/useGlobalFun'
import { useMainStore } from '@/store'
import { storeToRefs } from 'pinia'
const mainStore = useMainStore()
const { globalEnv } = storeToRefs(mainStore)

export default defineComponent({
  name: 'Contentlist',
  setup() {
    const sousuo = ref<boolean>(true)
    const router = useRouter()
    const copyState = ref('复制')
    const searchValue = ref()
    const value = ref<string>('')
    const visible = ref<boolean>(false)
    const fareurl = ref<string>('')
    const showCheckbox = ref<boolean>(false)
    const titleEditor = ref<boolean>(false)
    let height = ref(250)
    const showModal = () => {
      visible.value = true
    }

    const handleOk = (e: MouseEvent) => {
      // console.log(e)
      visible.value = false
    }
    const groupchange = () => {
      // console.log(checkboxValue, 'checkboxValue')
    }
    const fare = (item: any) => {
      visible.value = true
      // console.log(item, 'item')

      const url = `${globalEnv.value}/freeeditor/#/freeeditor?wid=${item.hhxsChartId}&screen=1`
      fareurl.value = url
    }
    const copyUrl = () => {
      copyText(fareurl.value).then((res: any) => {
        // console.log(fareurl, res)
        copyState.value = '复制成功'

      })
    }

    const type = ref(1)
    let checkboxValue: any = ref([])
    let dataList: any = ref([])
    const state = reactive({
      indeterminate: true,
      checkAll: false,
      checkedList: [],
    })
    const onSearch = (searchValue: string) => {
      // console.log('use value', searchValue)
      // console.log('or use this.value', value.value)
      getDataList()
    }
    const onCheckAllChange = (e: any) => {
      for (let i = 0; i < dataList.value.length; i++) {
        checkboxValue.value.push(dataList.value[i].hhxsChartId)
      }
      Object.assign(state, {
        checkedList: e.target.checked ? checkboxValue : [],
        indeterminate: false,
      })
      // showCheckbox.value = e.target.checked
    }
    const changetype = (val: number) => {
      val === 1 ? type.value = 2 : type.value = 1
      // console.log(val,type.value)
      // type.value === 2 ? getBoxHeight() : ''
    }
    const getDataList = () => {
      request.post(`/hhxs-ssc/sc/chart/page`,
        {
          title: searchValue.value,
          size: 1000,
          current: 1
        }
      ).then((res: any) => {
        dataList.value = res.data.data.records
      })
    }
    const toDetail = (id: string, screen: string) => {
      router.push({
        path: '/freeeditor',
        query: {
          wid: id,
          screen: screen
        }
      })
    }
    const handledelete = () => {
      // console.log(checkboxValue.value)
      if (checkboxValue.value.length === 0) {
        message.warn('请选择要删除的项目')
      }
      request.post('/hhxs-ssc/sc/chart/deleteChartBatch', checkboxValue.value).then((res: any) => {
        if (res.data.code === 200) {
          getDataList()
        }
      })
    }
    const deleteitem = (item: any) => {
      request.get(`/hhxs-ssc/sc/chart/deleteChart/${item.hhxsChartId}`).then((res: any) => {
        if (res.data.code === 200) {
          getDataList()
        }
      })
    }
    const editTitle = (item: any) => {
      if (!titleEditor.value) {
        return
      }
      if (item.title === '') {
        message.warn('标题不能为空')
        return
      }
      request.get(`/hhxs-ssc/sc/chart/getChartContent/${item.hhxsChartId}`)
        .then(res => {
          if (res.data.code === 200) {
            let params = res.data.data
            params.title = item.title

            request.post(`/hhxs-ssc/sc/chart/saveOrUpdate`, params).then(res => {
              if (res.data.code === 200) {
                message.success('修改成功!')
                titleEditor.value = false
              }
            })
          }
        })
    }
    const titleChange = (e: InputEvent) => {
      // console.log(e)
      titleEditor.value = true
    }
    const getBoxHeight = () => {
      const width = (getBoxWidth('.list') / 5) - 40
      height.value = (width * 208 / 248) + 43
    }
    watch(
      () => state.checkedList,
      val => {
        state.checkAll = val.length === dataList.value.length
      },


    )
    watch(
      () => type.value,
      val => {
        // console.log(val)
        nextTick(() => {
          val === 1 ? getBoxHeight() : ''
        })
      },
    )
    onMounted(async () => {
      await getDataList()
      getBoxHeight()
      window.addEventListener('resize', () => {
        type.value === 1 ? getBoxHeight() : ''
      })

    })
    return {
      ...toRefs(state),
      onSearch,
      onCheckAllChange,
      changetype,
      type,
      value,
      getDataList,
      handledelete,
      checkboxValue,
      dataList,
      toDetail,
      deleteitem,
      fare,
      handleOk,
      showModal,
      copyUrl,
      fareurl,
      visible,
      showCheckbox,
      groupchange,
      editTitle,
      titleEditor,
      titleChange,
      height,
      getBoxHeight,
      copyState,
      searchValue,
      sousuo
    }
  },
})
</script>
<style lang="scss">
// 下载为弹出框
.downloadAs .ant-popover-inner {
  width: 127px;
  background: #fff;
  box-shadow: 0 4px 20px 0 rgba(87, 98, 253, 0.1);
  border-radius: 10px;
  border: none;
}

.downloadFlex {
  display: flex;
  flex-direction: column;
  align-items: center;

  li {
    padding: 10px 0;

    &:hover {
      color: $textH2Color;
      cursor: pointer;
    }
  }
}

/* 分享显示弹出框 */
.shareLinks .ant-popover-inner {
  width: 384px;
  height: 146px;
  background: #fff;
  box-shadow: 0 4px 20px 0 rgba(87, 98, 253, 0.1);
  border-radius: 10px;
  border: none;
}

.shareLinks .ant-popover-content {
  width: 384px !important;
}

.shareLinks .ant-input-lg {
  background: #f8f9fa;
  border: 1px solid rgba(240, 241, 243, 1);
  border-radius: 10px;
}

.flex {
  display: flex;

  .linkCopy {
    width: 50px;
    height: 50px;
    background: #abaeff;
    line-height: 50px;
    text-align: center;
    border-radius: 10px;

    &:hover {
      cursor: pointer;
    }

    i {
      font-size: 22px;
    }
  }
}

h2 {
  padding: 10px 0;
  font-size: 18px;
}

/* 控制popover组件显示框 */
.popverclass .ant-popover-inner {
  box-shadow: 0 4px 20px 0 rgba(87, 98, 253, 0.1);
  border-radius: 10px;
  border: none;
  background: #fff;
  padding: 0 10px;
}
</style>
<style lang='scss' scoped>
.deleteAllFunction {
  button {
    float: left;
  }

  .delete {
    margin-left: 20px;
    float: left;
    margin-right: 30px;
    background: #fff;
    height: 42px;
    line-height: 42px;
    box-shadow: 0 4px 20px 0 rgba(87, 98, 253, 0.1);
    display: flex;
    padding-right: 10px;
    border-radius: 8px;
    cursor: pointer;
    color: #ff6370;

    dd {
      background: #fff1f2;
      border-radius: 8px;
      width: 42px;
      height: 42px;
      text-align: center;
      margin-right: 10px;
    }
  }
}

// .popver {
//   background-color: rgb(149, 22, 22) !important;
//   border-radius: 50%;
//   display: block !important;
//   // .ant-popover-inner{
//   //   border: 0;
//   // }
// }
// ::v-deep .ant-popover-title {
//   background-color: red;
// }
// 修改更多样式!!!!!!!
// ::v-deep .ant-popover-inner-content {
//   background-color: black;

// }

.batchDelete {
  width: 86px;
  height: 42px;
  background: #fff;
  border: 1px solid rgba(230, 229, 255, 1);
  border-radius: 10px;
  cursor: pointer;

  &:hover {
    color: $textH2Color;
  }
}

.cancelDeletion {
  width: 86px;
  height: 42px;
  background: #fff;
  border: 1px solid rgba(230, 229, 255, 1);
  border-radius: 10px;
  cursor: pointer;
  margin-right: 20px;

  &:hover {
    color: $textH2Color;
  }
}

.tips {

  // background: rgb(231, 74, 74);
  li {
    padding: 0 !important;
    height: 40px !important;
    // line-height: 32px;
    cursor: pointer;

    &:hover {
      color: $textH2Color;
      box-shadow: none !important;
    }
  }
}

.contentlist {
  background: #fff;
  border-radius: 30px;
  height: calc(100% - 288px);
  padding: 30px 0;
  margin: 0 20px 20px 0;

  .type {
    cursor: pointer;

    &:hover .appIcon-iconfont {
      color: #afacc7;
    }
  }

  input {
    height: 20px;
    line-height: 20px;
    background: none;
    border: 0;
    text-align: center;
    width: 90%;
  }

  .top {
    display: flex;
    padding: 0 40px;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;

      .appIcon-iconfont {
        padding-right: 5px;
      }

      .selectAll {
        width: 86px;
        height: 42px;
        background: #fff;
        border: 1px solid rgba(230, 229, 255, 1);
        border-radius: 10px;
      }
    }

    .right {
      display: flex;
      align-items: center;
      position: relative;

      .searchclass {
        position: absolute;
        width: 42px;
        height: 42px;
        background: #fff;
        border: 1px solid rgba(243, 243, 255, 1);
        box-shadow: 0 0 20px 0 rgba(104, 108, 232, 0.15);
        border-radius: 21px;
        text-align: center;
        line-height: 42px;
        right: 30px;

        i {
          font-size: 16px;

          &:hover {
            color: $textH2Color;
            cursor: pointer;
          }
        }
      }

      .select {
        color: $textH2Color;
      }

      .ant-input-search {
        margin-right: 20px;
        border: 0;
        height: 42px;
        background: #f6f8ff;
        border-radius: 20px;

        ::v-deep(.ant-input-search-icon) {
          position: absolute;
          width: 42px;
          height: 42px;
          text-align: center;
          line-height: 56px;
          border-radius: 50%;
          background-color: #686ce8;
          right: 0;
          top: 0;

          svg {
            font-size: 21px;
            color: #fff;
          }
        }

        ::v-deep(input.ant-input) {
          background: none;
        }
      }
    }
  }

  .list2 {
    overflow: hidden;
    height: calc(100% - 50px);

    ul {
      padding: 10px 0;
      height: 100%;
      overflow-y: scroll;
    }

    li {
      display: flex;
      height: 80px;
      align-items: center;
      justify-content: space-between;
      margin-left: 20px;
      margin-right: 20px;
      padding: 0 20px;

      input {
        text-align: left;
      }

      dl {
        display: flex;
        align-items: center;

        .appIcon-iconfont {
          display: none;
        }

        &:hover {
          .appIcon-iconfont {
            color: $textH2Color;
            display: block;
          }
        }
      }

      &:hover {
        box-shadow: 0 2px 20px 0 rgba(87, 98, 253, 0.13);
        border-radius: 15px;

        .edit {
          .appIcon-iconfont {
            color: $textH2Color;
          }
        }
      }

      .box {
        display: flex;
        align-items: center;
        font-size: 18px;

        p {
          cursor: pointer;
        }

        .checkbox {
          margin-right: 20px;
        }

        img {
          width: 63px;
          height: 54px;
          border-radius: 8px;
          margin: 0 20px 0 0;
          cursor: pointer;
        }
      }

      .edit {
        .appIcon-iconfont {
          color: $textDisabledColor;
          font-size: 22px;
        }
      }
    }
  }

  .list {
    overflow: hidden;
    padding: 0 20px;
    height: calc(100% - 50px);

    ul {
      height: 100%;
      overflow-y: scroll;
    }

    li {
      float: left;
      margin: 20px;
      box-sizing: border-box;
      width: calc(20% - 40px);
      box-shadow: 0 0 30px 0 rgba(47, 50, 134, 0.1);
      border-radius: 16px;
      background: #fff;
      transition: 0.5s all ease;
      overflow: hidden;
      height: 250px;

      input {
        width: 100%;
      }

      &:hover {
        box-sizing: border-box;

        input {
          width: calc(100% - 30px);
        }

        dl .appIcon-iconfont {
          color: $textH2Color;
        }

        .box {
          height: calc(100% - 43px);

          .mask,
          .edit {
            opacity: 1;
          }
        }
      }

      .box {
        background-size: cover;
        height: calc(100% - 43px);
        width: 100%;
        border-radius: 16px;
        position: relative;
        overflow: hidden;

        img {
          width: 100%;
        }

        .mask {
          position: absolute;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, 0.3);
          left: 0;
          top: 0;
          border-radius: 16px;
          z-index: 8;
          opacity: 0;
        }

        .checkbox {
          position: absolute;
          left: 18px;
          top: 18px;
          z-index: 9;
        }

        .edit {
          position: absolute;
          right: 10px;
          bottom: 10px;
          display: flex;
          z-index: 9;
          opacity: 0;

          dd {
            width: 30px;
            height: 30px;
            background: #fff;
            border-radius: 8px;
            color: #afacc7;
            text-align: center;
            line-height: 30px;
            margin-left: 10px;
            cursor: pointer;
          }
        }
      }

      dl {
        font-size: 18px;
        line-height: 42px;
        text-align: center;
        padding: 0 10px;
      }
    }
  }
}
</style>
